<template>
    <div class="desc-content">
        <div class="server-desc">
            <template>
                <v-card color="basil" class="basil">
                    <v-card-title class="text-center justify-center py-6">
                        <h1 class="font-weight-bold display-3 basil--text">
                            VIEWS
                        </h1>
                    </v-card-title>

                    <v-tabs
                            v-model="introTab"
                            background-color="transparent"
                            color="basil"
                            grow
                    >
                        <v-tab
                                v-for="item in introItems"
                                :key="item"
                        >
                            {{ item }}
                        </v-tab>
                    </v-tabs>

                    <v-tabs-items v-model="introTab">
                        <v-tab-item
                                v-for="item in introItems"
                                :key="item"
                        >
                            <v-card
                                    color="basil"
                                    flat
                            >
                                <div v-if="introTab == 0">
                                    <img src="../../assets/img/1.png">
                                    <img src="../../assets/img/2.png">
                                    <img src="../../assets/img/3.png">
                                </div>
                                <div v-if="introTab == 1">
                                    <img src="../../assets/img/4.png">
                                </div>
                                <div v-if="introTab == 2">
                                    <img src="../../assets/img/5.png">
                                </div>
                                <div v-if="introTab == 3">
                                    <img src="../../assets/img/6.png">
                                </div>
                                <div v-if="introTab == 4">
                                    <img src="../../assets/img/5.png">
                                </div>
                            </v-card>
                        </v-tab-item>
                    </v-tabs-items>
                </v-card>
            </template>
        </div>
        <div class="feature-desc">
            <template>
                <v-card color="basil" class="basil">
                    <v-card-title class="text-center justify-center py-6">
                        <h1 class="font-weight-bold display-3 basil--text">
                            FEATURE
                        </h1>
                    </v-card-title>

                    <v-tabs
                            v-model="featureTab"
                            background-color="transparent"
                            color="basil"
                            grow
                    >
                        <v-tab
                                v-for="item in featureItems"
                                :key="item"
                        >
                            {{ item }}
                        </v-tab>
                    </v-tabs>

                    <v-tabs-items v-model="featureTab">
                        <v-tab-item
                                v-for="(item, i) in featureItems"
                                :key="item"
                        >
                            <v-card
                                    color="basil"
                                    flat
                            >
                                <v-card-text v-html="featuresText[i]"></v-card-text>
                            </v-card>
                        </v-tab-item>
                    </v-tabs-items>
                </v-card>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DescContent",
        data () {
            return {
                introTab: null,
                introItems: [
                    '主城', '地皮世界', '资源世界', '地狱', '末地'
                ],
                featureTab: null,
                featureItems: [
                    '全球市场', '武器强化淬炼', '粘液科技', '等级头衔', 'GUI菜单', '等级怪物', '称号系统', '文明聊天', '结婚系统', 'PVP开关', '签到奖励'
                ],
                featuresText: [
                    `全服物品交易市场<br>每日0点更新全球市场物品, 过期物品将打回<br>VIP会员拥有不同发布数量`,
                    `武器强化/淬炼增加武器的攻击力/防御力，共有8个级别强化石/淬炼石<br>不同级别强化石/淬炼石拥有不同强化/淬炼成功概率，成功增加攻击力/防御力，反之武器将爆裂`,
                    `粘液科技为服务器带来科技感`,
                    `等级头衔根据等级石的升级而提升等级, 等级石共有10个等级`,
                    `GUI菜单，称之为个人小助手，内置丰富菜单，便携工具`,
                    `等级怪物共有10个等级，随之等级增强攻击力和防御力, 等级怪物将掉落强化石/淬炼石/等级石, 概率不一`,
                    `玩家可花费金币修改称号，限制字数5字`,
                    `服务器自动过滤脏字`,
                    `结婚系统运行两玩家结婚/离婚`,
                    `PVP开关可保护玩家的安全`,
                    `每日签到奖励, 奖励多多`
                ],
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
            }
        },
    }
</script>

<style scoped>
    /* Helper classes */
    .basil {
        background-color: #FFFBE6 !important;
    }
    .basil--text {
        color: #356859 !important;
    }
</style>
